<template>
  <div class="courseItem" >
    <p class="vip" v-if="false" style="display:flex; justify-content: center;">
      <img src="../../assets/images/labels/steaming.png" class="hot" />
      正在直播
    </p>
    <p class="vip vip2" v-else style="display:flex; justify-content: center;">
      直播时间: 10月11日 12:13
    </p>
    <el-image class="img-radius" :src="courseItem.courseThumb" @click="detail" ></el-image>

    <p class="class-content" v-if="else" style="display:flex; justify-content: center;">
      <el-button type="primary" disabled @click="login" style="margin-top:-65px; z-index:2; border-radius:65px;">已预约</el-button><!--已经购买 没有开播-->
    </p>
    <p class="class-content" v-else-if="true" style="display:flex; justify-content: center;">
      <el-button type="primary" @click="detail" style="margin-top:-65px; z-index:2; border-radius:65px;">预约</el-button> <!--未购买进入详情页-->
    </p>
    <p class="class-content" v-else style="display:flex; justify-content: center;">
      <el-button type="primary" @click="detail" style="margin-top:-65px; z-index:2; border-radius:65px;">进入</el-button> <!--已经购买 已经开播 进入详情页-->
    </p>


    <p class="class-content bottom_countInfo" v-if="true" style="display:flex; justify-content: space-between; padding: 0;">
      <span style="display:flex; justify-content: left">
        <img src="../../assets/images/labels/temp_teacher_head.png" class="hot" />
        &nbsp;李老师老师
        </span>
      <span style="display:flex; justify-content: right">
        <img src="../../assets/images/labels/steaming_count.png" class="hot" />
        &nbsp;9999人正在观看
      </span>
    </p>
    <p class="class-content bottom_countInfo" v-else style="display:flex; justify-content: space-between;">
      <span style="display:flex; justify-content: left">
        <img src="../../assets/images/labels/temp_teacher_head.png" class="hot" />
        &nbsp;李老师老师
        </span>
      <span style="display:flex; justify-content: right">
        <img src="../../assets/images/labels/steaming_count.png" class="hot" />
        &nbsp;9999人已经预约
      </span>
    </p>
  </div>
</template>

<script>

//import {mapGetters} from "vuex"
import router from '/@/router';
// import joinCarAnimi from "/@/components/joinCarAnimi/index.vue"
// import {useOptionsStore} from '/@/store/index';
// const optionsStore = useOptionsStore();

export default {
  components: {
    // joinCarAnimi
  },
  props: {
    courseItem: {},
  },
  data() {
    return {
      JoinShow: false,
      traX:0,
      traY:0,
      courseType:''
    };
  },
  computed: {
  },
  mounted(){
  },
  methods: {
    detail() {
      // console.log(this.courseItem.courseId);
      router.push({name:"course-courseDetail",query:{courseId:this.courseItem.courseId}});
    },
  },
};
</script>

<style lang="scss" scoped>
  .shop-container {
    position: relative;
  }

  // .shop-enter-active {
  //   transition: all 4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
  // }
  .flex-justify {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .courseItem {
    cursor: pointer;
    position: relative;
    border-radius: 10px;
    background-color: #fff;
    
    margin-bottom: 20px;
  }
  .img-radius {
    width: 100%;
    height: 160px;
    border-radius: 10px;
  }
  .vip {
    position: absolute;
    height: 30px;
    line-height: 30px;
    left: 0;
    top: 0;
    font-size:14px;
    // background-color: var(--el-color-primary);
    border-radius: 6px 0 6px 0;
    // color: #fff;
    // padding: 0 6px;
    z-index: 2;

    width: 100px;
    // height: 40px;
    background: #FFFFFF;
    opacity: 0.8;
    // border-radius: 10px 0px 10px 0px;
  }
  .vip2 {
    width: 170px;
  }
  .front-class {
    position: absolute;
    height: 30px;
    line-height: 30px;
    background-color: yellow;
    right: 0;
    top: 0;
    border-radius: 0 10px 0 10px;
    color: #fff;
    padding: 0 6px;
  }
  .radio {
    color: #fff;
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 10px;
    top: 100px;
    padding: 0 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .class-title {
    display: inline-block;
    width: 70%;
  }
  .class-type {
    font-size: 12px;
    color: #e85900;
    display: inline-block;
    width: 50px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #e85900;
  }
  .content-text {
    font-size: 12px;
    color: #808080;
    margin-top: 6px;
  }
  .class-content {
    padding: 6px 10px;
    line-height: 25px;
  }
  .content-text span {
    color: #db7c41;
  }
  .content-price span:first-child {
    display: inline-block;
    font-size: 18px;
    color: #ff5f19;
  }
  .content-price span:nth-child(2) {
    color: #b1b1b1;
    font-size: 14px;
    margin-left: 20px;
    text-decoration: line-through;
  }
  .icon {
    font-size: 30px!important;
    color: var(--el-color-primary);
    cursor: pointer;
  }
  .hot {
    width: 30px;
    height: 30px;
  }
  .bottom_countInfo {
    font-size: 14px;
  }
</style>